<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Tdrag</title>
    <link rel='stylesheet' type='text/css' href='drag.css' />
    <style>
        .mainMenu_all,
        .mainMenu {
            width: 20%;
            height: 100%;
            position: relative;
            color: white;
            background-color: #ebf7f0;
            overflow-x: hidden;

        }

        .childApps_all,
        .childApps {
            width: 80%;
            height: 100%;
            position: relative;
            color: white;
            overflow-x: hidden;
            background-color: #f7fdfa;
        }
        .mainMenu::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
        .childApps::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="nav">
            <div class="leNav">
                <ul class="navBar">
                    <li class="checkLi">自助服务终端</li>
                    <li>自助现金终端</li>
                    <li>超级柜台</li>
                    <li>排队叫号机</li>
                </ul>
            </div>
            <div class="riNav">
                <ul>
                    <li>
                        <span><img src="./static/img/icon/tpass_icon_new.png" alt=""></span>
                        <span>最新版本</span>
                    </li>
                    <li><span><img src="./static/img/icon/tpass_icon_yichang.png" alt=""></span>
                        <span> 异常</span> </li>
                    <li style="margin-right: 0;">
                        <div class="btn">返回</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="containerMain">
            <div class="leMenu">
                <div class="selInfo">
                    <div class="seltext">
                        <span id="selOption">最新版本</span>
                        <input type="text" style="display: none;" id='selOption_input'>
                        <span><img src="./static/img/icon/tpass_icon_xiala.png" alt=""></span>
                    </div>
                    <div class="selectDown">
                        <ul class="selectUl">
                            <li>最新版本</li>
                            <li>所有版本</li>
                        </ul>
                    </div>
                    <div class="keywork">
                        <input type="text" id="" placeholder="输入app名称或ID">
                    </div>
                </div>
                <div class="keyCheck">
                    <ul>
                        <li class="checkAll">
                            <span><img src="./static/img/icon/tpass_icon_quanxuan_normal.png" alt=""></span>
                            <span style="color:#fff">一键全选</span>
                        </li>
                        <li class="canelAll" style="display: none;">
                            <span><img src="./static/img/icon/tpass_icon_quanxuan_normal.png" alt=""></span>
                            <span style="color:#fff">取消全选</span>
                        </li>
                    </ul>

                </div>
            </div>
            <div class="transArea">
            </div>
            <div class="riMenu">
                <ul class="checkUl">
                    <li>
                        <span><img src="./static/img/icon/tpass_icon_yulan_normal.png" alt=""></span>
                        <span>预览</span>
                    </li>
                    <li style="margin-left:10%">
                        <span><img src="./static/img/icon/tpass_icon_shanchu_normal.png" alt=""></span>
                        <span>一键清空</span>
                    </li>
                </ul>

            </div>
        </div>
        <div class="main" id='iconMap'>
            <!-- <div class="leArea"> -->
                <div class="orgPart">
                    
                    <div class="childApps" data-type="originMenu">
                        <div class="cItem"></div>
                    </div>
                    <div class="mainMenu" data-type="originMenu">
                        <div class="mItem"></div>
                    </div>
                </div>
            <!-- </div> -->
            <div class="transArea">
                <div class="transIcon"><span><img src="./static/img/icon/tpass_icon_zuoyou.png" alt=""></span></div>
                <div class="dragIcon"><span><img src="./static/img/icon/tpass_icon_tuodong.png" alt=""></span></div>
                <div style="color:#aaa">拖动图标</div>
            </div>
            <!-- <div class="riArea"> -->
                <div class="dbPart">
                    <div class="mainMenu" data-type="dbMenu">

                    </div>
                    <div class="childApps" data-type="dbMenu"></div>
                    <div class="ident"
                        style="height: 140px; transition-duration: 0ms; transform: translate(0px, 0px); display: none;">
                    </div>
                </div>
            <!-- </div> -->




            <div class="morexy"
                style="width: 140px; height: 140px; transition-duration: 0ms; transform: translate(860px, 0px); display: none;">
            </div>
        </div>
        <div class="footer">
            <div class="footerText">
                <div><span><img src="./static/img/icon/tpass_icon_tishi.png" alt=""></span>
                    同一个app只能选择一个版本</div>
                <div><span><img src="./static/img/icon/tpass_icon_tishi.png" alt=""></span>
                    拖动一级菜单，默认选择其包含APP的最新版本</div>
            </div>
            <div class="btnNext">下一步</div>
        </div>
    </div>


</body>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="dragApps0914.js"></script>
<script>
    $(function () {
        //导航菜单选中和hover
        $(".navBar").on("click", "li", function () {
            $(this).addClass("checkLi").siblings().removeClass("checkLi")
        })
        $(".navBar").on("mouseenter", "li", function () {
            $(this).addClass("hoverLi").siblings().removeClass("hoverLi")
        })
        $(".navBar").on("mouseleave", "li", function () {
            $(this).removeClass("hoverLi")
        })
        //点击选择版本
        $(".seltext").click(function () {
            $(".selectDown").show()
            $(this).find("img").addClass("is-rotate")
        })
        // 下拉菜单hover
        $(".selectDown").on("mouseenter", "li", function () {
            $(this).removeClass("hoverSelectLi")
            $(this).addClass("hoverSelectLi").siblings().removeClass("hoverSelectLi")
        })
        $(".selectDown").on("mouseleave", "li", function () {
            $(this).removeClass("hoverSelectLi")
        })
        // 下拉菜单选择
        $(".selectDown").on("click", "li", function () {
            $(this).removeClass("checkSelectLi")
            $(this).addClass("checkSelectLi").siblings().removeClass("checkSelectLi")
            $("#selOption").html($(this).html())
            $(this).parent().parent().hide()
            $(this).parents().find("img").removeClass("is-rotate")
            $('#selOption_input').val($(this).index())
            newOrAllFun()
        })

        //一键全选
        $(".checkAll").click(function () {
            $(".canelAll").show()
        })
        $(".canelAll").click(function () {
            $(".canelAll").hide()
        })
        $(".keyCheck").on("mouseenter", "li", function () {
            $(this).removeClass("keyCheckLi")
            $(this).addClass("keyCheckLi").siblings().removeClass("keyCheckLi")
        })
        $(".keyCheck").on("mouseleave", "li", function () {
            $(this).removeClass("keyCheckLi")
        })
        // 预览一键清空hover
        $(".checkUl").on("mouseenter", "li", function () {
            $(this).removeClass("keyCheckLi")
            $(this).addClass("keyCheckLi").siblings().removeClass("keyCheckLi")
        })
        //     $(".").Tdrag({
        //         //scope:[".mainMenu_all",'.mainMenu'],
        //         scope:".mainMenu_all",
        //         pos:true,
        //         dragChange:true,
        //         changeMode:"sort"
        //     });
        //     $(".").Tdrag({
        //         //scope:[".mainMenu_all",'.mainMenu'],
        //         scope:".mainMenu",
        //         pos:true,
        //         dragChange:true,
        //         changeMode:"sort"
        //     });
    })
</script>

</html>